import { _decorator, Component, Node, Sprite } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveNumber } from '../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { Color } from 'cc';
import { Colors } from '../../game/basic';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('EditorBarrier')
@executeInEditMode
export class EditorBarrier extends BaseView {

    posId = ReactiveProperty.Create<number>(null);

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property({ slide: true, range: [0, 15, 1] })
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(Sprite)
    mainSprite: Sprite = null;

    useObserves() {
        return [
            MergeASAP(this.posId, this._colorId).subscribe(this.refresh.bind(this)),
        ];
    }

    refresh() {
        this.mainSprite.color = Colors[this.colorId];
    }
}

